<template>
    <div class="legend_root">
        <div class="title">{{title}}</div>
        <div class="legend_list">
            <div class="legend_li" v-for="(item,index) in list" :key="index">
                <div class="rect" :style="{background:item.color}"></div>
                <div class="text">{{item.name}}</div>
            </div>
        </div>
    </div>
    
</template>

<script>
export default {
    props:{
        title:{
            type:String,
            default:'类型'
        },
        list:{
            type: Array,
            default: () => []
        }
    }
}
</script>

<style lang="scss" scoped>
.legend_root{
    position: absolute;
    right: 3%;
    bottom: 40px;
    z-index: 99;
    background-color: rgba(18,46,72,0.90);
    border: dashed 1rem rgba(10,204,204,0.7);
    color: #fff;

    .title{
        line-height: 40px;
        font-size: 16px;
        padding-left: 10px;
    }
    .legend_li{
        padding: 0 20px 10px;
        display: flex;
        align-items: center;
        .rect{
            width: 20px;
            height: 8px;
            margin-right: 10px;
        }
        .text{
            font-size: 14px;
        }
    }
}
</style>